<template>
	<div id="aplayer"></div>
	<!-- 简单的使用示例： -->
	<!-- <a-player :audio="
		{
			artist: '周杰伦',
			name: '稻香',
			url: '../static/musics/src/稻香.mp3',
			cover: '../static/musics/image/f7a340059fb89929e4a9f4ce5c21ed411289309415d2c-eaDMnJ_fw1200.jfif',
			lrc: '../static/musics/lrc/稻香.lrc'
		}
	"/> -->
	
</template>

<script setup>
	import APlayer from 'aplayer'
	import 'aplayer/dist/APlayer.min.css'
	import { onMounted, reactive, onBeforeUnmount, onUpdated} from 'vue'
	
	
	// 设置组件功能选项
	const props = defineProps({
	  // 歌曲基本信息
	  audio: {
		  type: Object,
		  default: {
			  artist: '作者',
			  name: '歌名',
			  url: '',
			  cover: '',
			  lrc: '当前暂无歌词'
		  }
	  },
	  // 开启吸底模式
	  fixed: {
	    type: Boolean,
	    default: false
	  },
	  // 开启迷你模式
	  mini: {
	    type: Boolean,
	    default: false
	  },
	  // 音频自动播放
	  autoplay: {
	    type: Boolean,
	    default: false
	  },
	  // 主题色
	  theme: {
	    type: String,
	    default: 'rgba(255,255,255,0.2)'
	  },
	  // 音频循环播放
	  loop: {
	    type: String,
	    default: 'all' //'all' | 'one' | 'none'
	  },
	  // 音频循环顺序
	  order: {
	    type: String,
	    default: 'random' //'list' | 'random'
	  },
	  // 预加载
	  preload: {
	    type: String,
	    default: 'auto' //'auto' | 'metadata' | 'none'
	  },
	  // 默认音量
	  volume: {
	    type: Number,
	    default: 0.7,
	    validator: (value) => {
	      return value >= 0 && value <= 1;
	    }
	  },
	  // 歌曲服务器(netease-网易云, tencent-qq音乐, kugou-酷狗, xiami-小米音乐, baidu-百度音乐)
	  songServer: {
	    type: String,
	    default: 'netease' //'netease' | 'tencent' | 'kugou' | 'xiami' | 'baidu'
	  },
	  // 播放类型(song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家)
	  songType: {
	    type: String,
	    default: 'playlist'
	  },
	  // 歌的id
	  songId: {
	    type: String,
	    default: '19723756'
	  },
	  // 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
	  mutex: {
	    type: Boolean,
	    default: true
	  },
	  // 传递歌词方式
	  lrcType: {
	    type: Number,
	    default: 3
	  },
	  // 列表是否默认折叠
	  listFolded: {
	    type: Boolean,
	    default: true
	  },
	  // 列表最大高度
	  listMaxHeight: {
	    type: String,
	    default: '100px'
	  },
	  // 存储播放器设置的 localStorage key
	  storageName: {
	    type: String,
	    default: 'aplayer-setting'
	  }
	})
	// 创建组件传递信息
	const state = reactive({
	  instance:null
	})
	// 初始化播放器方法
	const init = () => {
		state.instance = new APlayer({
			container: document.getElementById('aplayer'),
			fixed: props.fixed,
			mini: props.mini,
			autoplay: props.autoplay,
			theme: props.theme,
			loop: props.loop,
			order: props.order,
			preload: props.preload,
			volume: props.volume,
			mutex: props.mutex,
			lrcType: props.lrcType,
			audio:props.audio,
		})
	}
	// 在组件挂载后初始化播放器
	onMounted(() => {
		// 初始化播放器
		init()
	})
	// 在组件挂载后，数据更新时，更新播放器
	onUpdated(() => {
		// 销毁播放器
		state.instance.destroy()
		// 重新创建播放器
		init()
	})
	// 销毁播放器
	onBeforeUnmount(() => {
		state.instance.destroy()
	})
</script>

<style scoped>
</style>